<template>
  <header class="layout-header">
    <div class="header-content">
      <div class="left-wrapper" @click="$router.push('/')">
        {{ config.p_name }}
      </div>
      <div class="phone-wrapper">
        <icon name="phone" />
        客服电话：{{ config.p_phone }}
      </div>
      <div class="login-wrapper" v-if="isLogin()">
        您好，<a @click="$router.push('/user-center')">
          {{ account.name }}
        </a>
        <a @click="handleClick"> 【{{ account.user_level.name }}】 </a>
        <span @click="logout" style="cursor: pointer">【退出】</span>
      </div>
      <div class="login-wrapper" v-else>
        欢迎您的到来，
        <a @click="$router.push('/user/login')">【请登录】</a>
      </div>
    </div>
  </header>
</template>

<script>
import { isLogin, clearToken } from "@/utils/auth";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["account"])
  },
  methods: {
    isLogin,
    logout() {
      clearToken();
      this.$router.push("/");

      setTimeout(() => {
        location.reload();
      }, 500);
    },
    handleClick() {
      if (this.account.applyStatus == 1) {
        this.$router.push("/user/auth/step1");
      } else {
        this.$router.push("/user-center");
      }
    }
  }
};
</script>

<style lang="less" scoped>
.layout-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transition: all 0.3s;

  .header-content {
    width: @base-width;
    margin: 0 auto;
    display: flex;
    height: @header-height;
    align-items: center;
    background: @white;
    padding: 0 20px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
  }

  .left-wrapper {
    flex: 1;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
  }

  .phone-wrapper {
    margin-right: 40px;
    display: flex;
    align-items: center;

    .icon-phone {
      width: 16px;
      margin-right: 4px;
      position: relative;
      top: 1px;
    }
  }
}
</style>
